<template>
  <div class="studentMan-container">
    <TitleBar title="条件筛选"></TitleBar>
    <ConditionFilter
      @headleSubmit="headleSubmit"
      :page="pageRef"
      ref="comditionDomRef"
    ></ConditionFilter>
    <TitleBar title="学生列表"></TitleBar>
    <StudentList
      :tudentListData="StudentListDataRef"
      @handleEdit="handleEdit"
      @headlePage="headlePage"
      :page="pageRef"
      :Loading="isLoadingRef"
    ></StudentList>
    <TitleBar title="详情信息"></TitleBar>
    <Details :StudentListSelect="StudentListSelectRef"></Details>
  </div>
</template>

<script setup>
import TitleBar from "@/components/TitleBar/index.vue";
import { onMounted, ref, watchEffect } from "vue";
import ConditionFilter from "./componetns/ConditionFilter.vue";
import StudentList from "./componetns/StudentList.vue";
import Details from "./componetns/Details.vue";
const StudentListDataRef = ref(); // 学生列表的数据
const comditionDomRef = ref(); // 条件筛选的DOM元素
const pageRef = ref(1); // 页码
const isLoadingRef = ref(false)
const StudentListSelectRef = ref(); // 选中的数据
onMounted(() => {
  watchEffect(() => {
    isLoadingRef.value = comditionDomRef.value.isLoading
  });
});
const headleSubmit = (data) => {
  // 获取远程数据
  if (data === 1) {
    pageRef.value = data;
    return;
  }
  StudentListDataRef.value = data;
};
const headlePage = (page) => {
  // 修改页码
  pageRef.value = page;
};
// 选中的数据
const handleEdit = (data) => {
  StudentListSelectRef.value = data;
};
</script>

<style lang="less" scoped>
</style>